<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10_自定义JS对象</title>

</head>
<body>
<table border="1px">
    <caption>商品列表</caption>
    <tr>
        <th>商品名称</th>
        <th>商品价格</th>
        <th>商品库存</th>
    </tr>
</table>
<script>
    let productArr = [
        {title: '小米14', price: 4999, num: 500},
        {title: '苹果16', price: 8999, num: 600},
        {title: '魅族60', price: 3999, num: 700},
        {title: '魅族60', price: 3999, num: 700},
        {title: '魅族60', price: 3999, num: 700},
        {title: '魅族60', price: 3999, num: 700},
        {title: '魅族60', price: 3999, num: 700},
        {title: '魅族60', price: 3999, num: 700},
        {title: '魅族60', price: 3999, num: 700},
        {title: '魅族60', price: 3999, num: 700},
        {title: '华为70', price: 6999, num: 1000},
    ];
    //1.获取表格元素
    let table = document.querySelector('table');
    //2.遍历数组
    for (var i = 0; i < productArr.length; i++) {
        //3.每遍历到一件商品，需要创建1个tr三个td
        let tr = document.createElement('tr');
        let t1 = document.createElement('td');
        let p1 = document.createElement('td');
        let n1 = document.createElement('td');
        //4.将数组中的值依次放入单元格中
        t1.innerHTML = productArr[i].title;
        p1.innerHTML = productArr[i].price;
        n1.innerHTML = productArr[i].num;
        //5.将单元格放入tr中
        tr.append(t1, p1, n1);
        //6.将tr放入table中
        table.append(tr);
    }
    //1.定义JS对象 直接声明时就定义好对象的属性与方法
    let p1 = {
        name: '张三',
        age: 18,
        say: function () {
            console.log('我是' + this.name + ',今年' + this.age + '岁');
        }
    };
    p1.say();
    console.log(p1);
    //2.先定义空的JS对象，再后期为此对象增加属性与方法
    let p2 = {};
    p2.name = '张三';
    p2.age = 18;
    p2.say = function () {
        console.log('我是' + this.name + ',今年' + this.age + '岁');
    };
    p2.say();
    console.log(p2);

</script>
</body>
</html>